<template>
  <div class="app-container">
    <div />
    <div>
      <el-tabs v-model="currentView" type="card" @tab-click="handleClick">
        <el-tab-pane label="表格显示" name="TablePage" />
        <el-tab-pane label="图片显示" name="LineChartPage" />
      </el-tabs>
      <div :is="currentView" keep-alive />
    </div>
  </div>
</template>

<script>

export default {
  components: {
    // 以下方式引入路由是路由的懒加载，有利于页面优化
    TablePage: resolve => {
      require(['./components/TablePage.vue'], resolve)
    },
    LineChartPage: resolve => {
      require(['./components/LineChartPage.vue'], resolve)
    }
  },
  data() {
    return {
      currentView: 'TablePage'
    }
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event)
    }
  }
}
</script>
<style lang="scss">

</style>
